<template>
  <div id="list">
    <h2>用户列表</h2>

    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="用户名">
        <el-input placeholder="用户名"></el-input>
      </el-form-item>
      <el-form-item label="昵称">
        <el-input placeholder="昵称"></el-input>
      </el-form-item>
      <el-form-item label="电话号码">
        <el-input placeholder="电话号码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary">添加新用户</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary">导出</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="tableData" style="width: 100%">
      <el-table-column label="头像" width="180">
        <template slot-scope="scope">
          <img
            :src="scope.row.avatarUrl"
            alt=""
            :style="{ width: '60px', height: '60px' }"
          />
        </template>
      </el-table-column>
      <el-table-column
        prop="username"
        label="用户名"
        width="180"
      >
      </el-table-column>
      <el-table-column
        prop="nickname"
        label="昵称"
        width="230"
      >
      </el-table-column>
      <el-table-column label="出生日期" width="230">
        <template slot-scope="scope">
          <span>{{ scope.row.birthday | date }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="setHeader(scope.row)"
            class="updateBtn"
          >
            设置头像
          </el-button>
          <el-button
            size="mini"
            type="primary"
            @click="editHandler(scope.row)"
            class="updateBtn"
          >
            编辑
          </el-button>
          <el-popconfirm
            title="确定删除吗？"
            class="popconfirm"
            @confirm="removeHandler(scope.row)"
          >
            <el-button
              slot="reference"
              size="mini"
              type="danger"
            >
              删除
            </el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="pageSize"
      @current-change="changePage"
    >
    </el-pagination>

    <el-dialog
      title="设置头像"
      :visible.sync="dialogFormVisible"
    >
      <form ref="headerForm">
        <div>请选择头像</div>
        <input type="file" name="avatar" id="" />
      </form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取 消
        </el-button>
        <el-button type="primary" @click="saveHeader">
          确 定
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getUserList,
  removeUser,
  setUserHeader
} from '@/api/users'

export default {
  name: 'list',
  data() {
    return {
      tableData: [],
      total: 0,
      page: 1,
      pageSize: 5,
      dialogFormVisible: false
      // tableData: [
      //   {
      //     username: 'ash',
      //     birthday: 1091213313121,
      //     nickname: '无头怪',
      //     avatar: '/images/1.jpg'
      //   }
      // ]
    }
  },
  filters: {
    // 格式化日期为 yyyy-MM-dd
    date(val) {
      return new Date(val).toISOString().slice(0, 10)
    }
  },
  methods: {
    // 分页查询用户列表数据
    getList({ page = 1, pageSize = 5 } = {}) {
      getUserList({ page, pageSize }).then(res => {
        this.tableData = res.list
        this.total = res.total
        this.pageSize = res.pageSize
        this.page = res.page
      })
    },
    // 翻页
    changePage(page) {
      this.getList({ page, pageSize: this.pageSize })
    },
    // 编辑用户信息
    editHandler(userInfo) {
      console.log('待编辑用户信息：', userInfo)
      // 编程式导航，跳转到编辑页面
      this.$router.push({
        name: 'Edit',
        params: {
          userInfo
        }
      })
    },
    // 删除用户
    removeHandler(userInfo) {
      removeUser(userInfo).then(() => {
        this.getList({
          page: this.page,
          pageSize: this.pageSize
        })
      })
    },
    // 设置头像
    setHeader(userInfo) {
      this.dialogFormVisible = true
      this.userInfo = userInfo
    },
    saveHeader() {
      // 创建 FormData 对象
      const formdata = new FormData(this.$refs.headerForm)
      // formdata 对象已经包含需要上唇的图像文件数据
      // 再向 formdata 对象中添加用户名的文本数据
      formdata.append('username', this.userInfo.username)

      // 调用保存头像的方法
      setUserHeader(formdata).then(() => {
        this.dialogFormVisible = false
      })
    }
  },
  created() {
    //methods和data已经初始化,常用于操作数据，发起ajax请求
    this.getList()
  }
}
</script>

<style lang="scss" scoped>
h2 {
  margin-bottom: 20px;
}
.el-pagination {
  margin: 10px auto;
}
.updateBtn {
  margin-right: 10px;
}
</style>
